{extend name="login_base" /} {block name="seo"}
{/block}
{block name="css"}
{/block}
{block name="body"}
    <style>
        /*兼容手机代码*/
        body{
            width:100%;
            min-width:100%;
        }
        @media screen and (max-width: 900px) {
            .step{
                display:none;
            }
            .u-forget .forget_input{
                width:88%;
                max-width:88%;
            }
            .u-forget .title_forget{
                font-size:17px;
                margin-top:20px;
            }
            .u-forget .user_input{
                border:0;
                padding:10px 0;
                color: #5d5d5d;
                border-bottom:1px solid #F1F1F1;
                border-radius:0;
            }
            .u-forget .user_input[name="captcha"]{
                width:calc(100% - 130px);
            }
            .u-forget .forget_input .code img{
                border:0;
                border-radius:0;
                width:130px;
            }
            .u-forget .forget_next{
                border-radius:2px;
                margin-top:32px;
            }
            .next_2 .icon{
                margin-top:20px!important;
                width:80px!important;
            }
            .next_2 .que{
                width:100%!important;
                font-size:15px;
                line-height:25px;
            }
            .send_code{
                border-radius:0!important;
                border:1px solid #F6F6F6!important;
            }
        }
    </style>

<div class="u-container">
    <h3 class="title_forget">{$site_config.site_title} - 找回登录密码</h3>

    {if $forget.step eq 2}
    <div class="step step2 visible-lg visible-md"></div>
    <form class="forget_input layui-form" id="formData" method="post" style="width: 500px;">
        <div class="next_2">
            <input type="text" value="{$forget.object}" name="object" readonly placeholder="" class="user_input"/>
            <input type="hidden" name="object_type" value="{$forget.object_type}"/>
            <div class="m_phone_code layui-clear">
                <input type="text" placeholder="请输入您收到的验证码" name="checkcode" maxlength="6" id="user" class="user_input">
                <a href="javaScript:void(0)" class="send_code" id="back_1">返回上一步</a>
            </div>
            <button class="forget_next layui-btn" lay-submit>下一步</button>
        </div>
    </form>
    {elseif $forget.step eq 3}
    <div class="step step3 visible-lg visible-md"></div>
    <form class="forget_input layui-form" id="formData" method="post" style="">
        <div class="next_3">
            <input type="hidden" value="{$forget.salt}" name="salt">
            <input type="hidden" value="{$forget.codeId}" name="codeId">
            <input type="password" placeholder="输入新密码" autocomplete="off" name="password" class="user_input"/>
            <input type="password" placeholder="确认新密码"  autocomplete="off" name="password_confirm" class="user_input"/>
            <button type="button" class="forget_next layui-btn">完成重置</button>
        </div>
    </form>
    {else /}
    <div class="step step1 visible-lg visible-md"></div>
    <form class="forget_input layui-form" id="formData" method="post" style="">
        <div class="next_1">
            <input type="text" placeholder="手机号码或邮箱号码" name="username" class="user_input"/>
            <div class="code layui-clear" style="display:block;">
                <input type="text" placeholder="右侧验证码" maxlength="4" name="captcha" class="user_input"/>
                <img src="{:url('index/page/captcha')}?'+Math.random();" title="点击可刷新验证码" onclick="this.src='{:url(\'index/page/captcha\')}?_='+Math.random()" id="img_code"
                     alt="验证码"/>
            </div>
            <button class="forget_next layui-btn" lay-submit>下一步</button>
        </div>
    </form>
    {/if}
</div>
{/block}
{block name="script"}
<script src="__PUBLIC__/js/jquery-3.3.1.min.js"></script>
<script src="__PUBLIC__/plugins/layui/layui.js"></script>
<script src="__HOME__/js/public.js"></script>
<script>
    layui.use(['layer'], function () {
        var layer = layui.layer;
        /*忘记密码页面*/
        $(".next_1 .forget_next").on('click', function (e) {
            var data = $(".layui-form").field();
            request({
                data: {data: data, post_type: 'next_1'},
                done: function (res) {
                    $("#img_code").click();
                }
            });
            return false;
        });

        $(".next_2 .forget_next").on('click', function (e) {
            var data = $(".layui-form").field();
            request({
                data: {data: data, post_type: 'next_2'},
                done: function (res) {
                    $("#img_code").click();
                }
            });

            return false;
        });

        $(".next_3 .forget_next").on('click', function (e) {
            var form = $("#formData");
            var data = form.field();
            var vf =  form.verify({
                password:function (v,item) {
                    if(!v||v.length<6||v.length>18){
                        return "请输入 6 - 18 位数密码";
                    }
                },
                password_confirm:function (v,item) {
                    if(v!==$("[name=password]").val()){
                        return "两次密码输入不一致";
                    }
                }
            });
            if(vf){  request({
                data: {data: data, post_type: 'next_3'},
                done:function (res) {
                    $("#img_code").click();
                    if(res.code===1){
                        $(".step").addClass("step4");
                        layer.msg("密码重置成功！",function(){
                            location = "/index/user/login.html";
                        });
                    }
                }
            });  }
            return false;
        });
    });
    var countdown = "0";
    function settime(obj) {
        if (countdown == 0) {
            obj.html("返回上一步");
            $(obj).attr('href', '/user/forgetpass.html');
            countdown = 60;
            return;
        } else {
            obj.html("剩余(" + countdown + ")");
            countdown--;
        }
        setTimeout(function () {
                settime(obj)
            }
            , 1000)
    }
    settime($("#back_1"));
</script>
{/block}
